<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.path">
      <router-link to="/welcome" v-if="index == 0">{{
        item.meta.title
      }}</router-link>
      <span v-else>{{ item.meta.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
import { onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
export default {
  name: 'BreadCrumb',
  setup() {
    const router = useRoute();
    const breadList = computed(() => {
      return router.matched;
    });

    onMounted(() => {
      // const test = [{ a: 'aaa' }, { b: 'bbb' }, { c: 'ccc' }];
      // console.log('routes=>', router.matched);
      // console.log('tags=>', router.matched.slice(-1));
      // console.log('bread=>', location.hash.slice(1));
    });

    return { breadList };
  },
};
</script>
